<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>
    <link rel="stylesheet" href="/static/css/common.css"/>
    <script type="text/javascript">

      function uploadFile() {
        var fd = new FormData();
        fd.append("file", document.getElementById('fileToUpload').files[0]);
        fd.append("type", "html5")
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "/file/upload_file");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = "进度: " + percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        // alert(evt.target.responseText);
        var responseText = evt.target.responseText;
        var data = JSON.parse(responseText)
        document.getElementById("resultLink").innerHTML = data.link;
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="POST" action="/file/upload_file">
    <div class="row">
        <input type="file" name="file" class="" id="fileToUpload"/>
        <input type="button" class="btn" onclick="uploadFile()" value="上传文件" />
        <span id="progressNumber"></span>
        
    </div>
    <div id="resultLink"></div>
</form>

</body>